
<template>
  <a-dropdown
    :visible="show"
    overlay-class-name="header-btn-item msg-notice-box cloud-box-main"
    :trigger="['click']"
    :overlay-style="{zIndex: '2000!important'}"
  >
    <div slot="overlay">
      <a-spin :spinning="systemStatusLoading" class="c-cloud-box">
        <div class="dropdown-tabs" :style="{width: '500px!important'}">
          <div class="fs-16 fw-500 pt-16 pl-16 pb-12 text-color-21252e ">连接状态</div>
          <div class="flex-1">
            <a-row class=" pl-16 pr-16" type="flex">
              <!-- <a-col :flex="1">
                <div class="h-cloud-top-title">ACARS Age</div>
                <div class="h-cloud-top-title2">{{ forTime(systemStatus.latestAcarsTime) }}</div>
                <div class="h-cloud-top-title2"> -- </div>
              </a-col> -->
              <a-col :flex="1">
                <div class="h-cloud-top-title">更新时间</div>
                <div class="h-cloud-top-title2">{{ systemStatus.updateTime?$moment.utc(systemStatus.updateTime).format('YYYY-MM-DD'):'--' }}</div>
              </a-col>
              <a-col :flex="1">
                <div class="h-cloud-top-title">信号</div>
                <div class="h-cloud-top-title2">{{ systemStatus.kafkaStatus }}</div>
              </a-col>
              <a-col :flex="1">
                <div class="h-cloud-top-title">在飞数</div>
                <div class="h-cloud-top-title2"> {{ systemStatus.airplaneNumber }} </div>
              </a-col>
              <!-- <a-col :flex="1">
                <div class="h-cloud-top-title">Refresh</div>
                <div class="h-cloud-top-title2"> -- </div>
              </a-col> -->
            </a-row>
            <!-- <a-table
              class="cloud-box-table beauty-scroll mt-20"
              size="small"
              :columns="columns"
              :data-source="datass"

              :pagination="false"
              :row-key="(row,index) =>index"
            /> -->
          </div>

          <a-divider class=" msg-divider" />
          <div class="d-flex jc-end">
            <a-button class="mr-8 mb-16" @click="show=false">关闭</a-button>
            <!--
              <a-button
                :loading="readLoading"
                :disabled="noticeNum===0"
                class="mr-16 mb-16"
                type="primary"
                @click="readAllHandler"
              >错误日志</a-button>
             -->
          </div>
        </div>

      </a-spin>

    </div>
    <span class="header-notice" @click="fetchCloud">
      <a-icon :component="require('@/assets/icon/System_Status.svg')" />
    </span>
  </a-dropdown>
</template>

<script>
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex';
import { format } from 'timeago.js';
export default {
  name: 'HeaderNotice',
  components: {
  },
  data() {
    return {
      checkedFilterShow: false,
      checkedFilterTmp: [],
      checkedFilter: [1, 2, 3],
      show: false,
      format
      // datass: [
      //   {
      //     t1: 'Airplane',
      //     t2: '1'
      //   },
      //   {
      //     t1: 'Comment/Document',
      //     t2: '1'
      //   },
      //   {
      //     t1: 'Events',
      //     t2: '1'
      //   },
      //   {
      //     t1: 'Flight Data',
      //     t2: '1'
      //   },
      //   {
      //     t1: 'User Info',
      //     t2: '1'
      //   },
      //   {
      //     t1: 'Other',
      //     t2: '1'
      //   }
      // ],

      // columns: Object.freeze([
      //   {
      //     title: '服务商',
      //     align: 'left',
      //     dataIndex: 't1',
      //     customRender: (value, record, index) => {
      //       return value;
      //     }
      //   },
      //   {
      //     title: 'Good',
      //     align: 'left',
      //     dataIndex: 't2',
      //     customRender: (value, record, index) => {
      //       return index === 0 ? this.systemStatus.airplaneNumber : 0;
      //     }
      //   },
      //   {
      //     title: 'InProg',
      //     align: 'left',
      //     dataIndex: 't3',
      //     customRender: (value, record, index) => {
      //       return 0;
      //     }
      //   },
      //   {
      //     title: 'Failed',
      //     align: 'left',
      //     dataIndex: 't4',
      //     customRender: (value, record, index) => {
      //       return 0;
      //     }
      //   },
      //   {
      //     title: 'Streaming\nGood',
      //     align: 'left',
      //     dataIndex: 't5',
      //     width: 66,
      //     customRender: (value, record, index) => {
      //       return 0;
      //     }
      //   },
      //   {
      //     title: 'Streaming\nFailed',
      //     align: 'left',
      //     dataIndex: 't6',
      //     width: 66,
      //     customRender: (value, record, index) => {
      //       return 0;
      //     }
      //   },
      //   {
      //     title: 'Updates',
      //     align: 'left',
      //     dataIndex: 't7',
      //     customRender: (value, record, index) => {
      //       return 0;
      //     }
      //   }
      // ])
    };
  },
  computed: {
    ...mapState('user', [
      'systemStatus',
      'systemStatusLoading'
    ]),
    ...mapGetters('user', [
      'userInfo'
    ])
  },
  mounted() {

  },
  methods: {
    ...mapActions('user', [
      'getSystemStatus'
    ]),
    ...mapMutations('fraMonitoring', [
      'setState'
    ]),
    forTime(time) {
      return this.$moment.utc(new Date()).diff(this.$moment.utc(time), 'minute') < 60 ? format(this.$moment.utc(time).add(8, 'hour').format('YYYY-MM-DD HH:mm:ss'), 'zh_CN') : time;
    },
    fetchCloud() {
      if (!this.show) {
        this.show = true;
        this.getSystemStatus();
      }
    }

  }
};
</script>

<style lang="less">
  @import './header-btn.less';
  .cloud-box-main{
    th,td{
      padding-left:2px!important;
      padding-right:2px!important
    }
    .ant-table{

      border-bottom:none!important

    }
  }
  .msg-notice-box{
    .dropdown-tabs{
      display: flex;
      flex-direction: column;
    }
    .ant-list.ant-list-split{
      flex: 1;
    }
  }
  .h-cloud-top-title{
    font-size: 12px;
    color: #9EA5B2;
  }
  .h-cloud-top-title2{
    font-size:14px;
    color: #505363;
        line-height: 1.1;
  }
  .cloud-box-table{
    .ant-table-body{
      margin: 0!important;
    }
    .ant-table-thead{
          background: #F9F9FB;

          font-size: 12px;
          .ant-table-column-title{
 color:#9EA5B2!important;
          }
    }
  }
</style>

